﻿<div Class="rz-p-0 rz-p-md-12">
    <RadzenStack  Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" Class="rz-p-4 rz-mb-6 rz-border-radius-1" Style="border: var(--rz-grid-cell-border);">
        <RadzenLabel Text="AlignItems:" />
        <RadzenSelectBar @bind-Value="@alignItems" TextProperty="Text" ValueProperty="Value"
                    Data="@(Enum.GetValues(typeof(AlignItems)).Cast<AlignItems>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" Class="rz-display-none rz-display-xl-flex" />
        <RadzenDropDown @bind-Value="@alignItems" TextProperty="Text" ValueProperty="Value"
                    Data="@(Enum.GetValues(typeof(AlignItems)).Cast<AlignItems>().Select(t => new { Text = $"{t}", Value = t }))" Class="rz-display-inline-flex rz-display-xl-none" />
    </RadzenStack>
    <RadzenTimeline AlignItems="@alignItems" LinePosition="LinePosition.Alternate" style="max-width: 600px; margin: 0 auto;">
        <Items>
            <RadzenTimelineItem Size="PointSize.Medium" PointStyle="PointStyle.Warning">
                <LabelContent><RadzenBadge BadgeStyle="BadgeStyle.Warning" IsPill="true" Text="6th century BC" /></LabelContent>
                <ChildContent><RadzenText TextStyle="TextStyle.H6" Class="rz-m-0">Persian soldiers baked flatbreads with cheese and dates</RadzenText></ChildContent>
            </RadzenTimelineItem>
            <RadzenTimelineItem Size="PointSize.Medium" PointStyle="PointStyle.Danger">
                <LabelContent><RadzenBadge BadgeStyle="BadgeStyle.Danger" IsPill="true" Text="19 BC" /></LabelContent>
                <ChildContent><RadzenText TextStyle="TextStyle.H6" Class="rz-m-0">An early reference to a pizza-like food</RadzenText></ChildContent>
            </RadzenTimelineItem>
            <RadzenTimelineItem Size="PointSize.Medium" PointStyle="PointStyle.Warning">
                <LabelContent><RadzenBadge BadgeStyle="BadgeStyle.Warning" IsPill="true" Text="997 AD" /></LabelContent>
                <ChildContent><RadzenText TextStyle="TextStyle.H6" Class="rz-m-0">The word pizza was first documented</RadzenText></ChildContent>
            </RadzenTimelineItem>
            <RadzenTimelineItem Size="PointSize.Medium" PointStyle="PointStyle.Danger">
                <LabelContent><RadzenBadge BadgeStyle="BadgeStyle.Danger" IsPill="true" Text="16th century" /></LabelContent>
                <ChildContent><RadzenText TextStyle="TextStyle.H6" Class="rz-m-0">A galette flatbread was referred to as a pizza in Naples</RadzenText></ChildContent>
            </RadzenTimelineItem>
            <RadzenTimelineItem Size="PointSize.Medium" PointStyle="PointStyle.Warning">
                <LabelContent><RadzenBadge BadgeStyle="BadgeStyle.Warning" IsPill="true" Text="1843" /></LabelContent>
                <ChildContent><RadzenText TextStyle="TextStyle.H6" Class="rz-m-0">Alezandre Dumans described the diversity of pizza toppings</RadzenText></ChildContent>
            </RadzenTimelineItem>
        </Items>
    </RadzenTimeline>
</div>

@code {
    AlignItems alignItems = AlignItems.Center;
}